import { useMutation } from "@apollo/client";
import { Button, Collapse, InputNumber, message, Image } from "antd";
import { find } from "lodash";
import { forwardRef, useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";

import U200 from "~/assets/imgs/u200.png";
import {
  updateSystemDocument,
  useSystemConfig,
} from "~/hooks/systemConfig/use-systemConfig-api";
import {
  Mutation,
  MutationUpdateSettingArgs,
  UpdateSettingInput,
} from "~/modules/api-server/types2";
import { getContent } from "~/plugins/api-server";

import "./index.scss";
interface Props {}

const SystemConfig = (props: Props, ref: any) => {
  const [messageApi, contextHolder] = message.useMessage();
  const { Panel } = Collapse;
  const { load }: any = useSystemConfig();
  const router = useNavigate();
  const [update, { data: result }] = useMutation<
    Mutation,
    MutationUpdateSettingArgs
  >(updateSystemDocument, {
    client: getContent().explorer_apiServer,
  });

  const [max_tasks_by_user, setMaxTasksByUser] = useState(0);
  const [get_data_timeout, setGetDataTimeout] = useState(0);
  const onChange = (key: string | string[]) => {};

  const onSaveConfig = async () => {
    const data1: UpdateSettingInput = {
      setting: [
        { item: "max_tasks_by_user", content: { data: max_tasks_by_user } },
        { item: "get_data_timeout", content: { data: get_data_timeout } },
      ],
    };
    await update({
      variables: {
        input: data1,
      },
    });
    messageApi.success("修改成功！");
  };
  useEffect(() => {
    const loadData = async () => {
      const { data } = await load();
      const settings = data?.setting?.data ?? [];
      const init_max_tasks_by_user: number =
        find(settings, (s) => {
          return s.item == "max_tasks_by_user";
        })?.content?.data ?? 0;
      setMaxTasksByUser(init_max_tasks_by_user);

      const init_get_data_timeout: number =
        find(settings, (s) => {
          return s.item == "get_data_timeout";
        })?.content?.data ?? 0;
      setGetDataTimeout(init_get_data_timeout);
    };
    loadData();
  }, []);

  // 返回
  // const onGoBack = () => {
  //   router("/");
  // };
  return (
    <div className="system-settings">
      <div className="system-settings-head">
        <p>QUIVER</p>
        <div>
          {/* <Button
            type="text"
            style={{ color: "#5E7CE0", marginTop: "8px" }}
            icon={<CloseOutlined twoToneColor="#6C92FA" />}
            onClick={() => onGoBack()}
          >
            取消
          </Button> */}
          <Button
            type="text"
            style={{ color: "#5E7CE0", marginTop: "8px" }}
            icon={
              <Image
                width={13}
                style={{ marginTop: "-3px" }}
                preview={false}
                src={U200}
              />
            }
            onClick={() => onSaveConfig()}
          >
            保存
          </Button>
        </div>
      </div>
      <Collapse
        className="ml-16px! mr-16px!"
        expandIconPosition="end"
        defaultActiveKey={["1", "2"]}
        onChange={onChange}
      >
        <Panel
          className="bg-#EFF4FB! p-0!"
          header="用户最大创建任务数量"
          key="1"
        >
          <InputNumber
            addonAfter="个"
            value={max_tasks_by_user}
            onChange={(value) => {
              (value && setMaxTasksByUser(value)) || 0;
            }}
          />
        </Panel>
        <Panel
          className="bg-#EFF4FB! p-0!"
          header="图表数据请求超时时间"
          key="2"
        >
          <InputNumber
            addonAfter="秒"
            value={get_data_timeout}
            onChange={(value) => {
              (value && setGetDataTimeout(value)) || 0;
            }}
          />
        </Panel>
      </Collapse>
      {contextHolder}
    </div>
  );
};

export default forwardRef(SystemConfig);
